<template>
  <div class="Personal">
    <!-- 标题栏 -->
    


    <div class="MyPersonal">
      <router-link to="/message">
        <van-row>
          <van-col span="4"
            ><van-image round width="10rem" height="6rem" src="/banner/11.png"
          /></van-col>
          <van-col span="10" offset="4">
            <span>小考虫</span>
            <p>比别人多一点执着，你就会创造奇迹</p>
          </van-col>
        </van-row>
      </router-link>
    </div>
    <!-- 下载订单收藏三个 -->
    <van-row type="flex" justify="space-around" class="wode">
      <van-col span="6">
        <router-link to="/download">
          <van-image src="/banner/1.png" />
          <p>我的下载</p>
        </router-link>
      </van-col>

      <van-col span="6">
        <router-link to="/indent">
          <van-image src="/banner/2.png" />
          <p>我的订单</p>
        </router-link>
      </van-col>

      <van-col span="6">
        <router-link to="/collect">
          <van-image src="/banner/3.png" />
          <p>我的收藏</p>
        </router-link>
      </van-col>
    </van-row>
    <div class="xingxi">
      <van-cell icon="/banner/4.png" title="开课提醒服务" is-link to="remind" />
      <van-cell icon="/banner/5.png" title="我的勋章" is-link to="medal" />
      <van-cell icon="/banner/6.png" title="地址管理" is-link to="ipam" />
      <van-cell icon="/banner/7.png" title="设置" is-link to="setting" />
      <van-cell icon="/banner/8.png" title="联系客服" is-link to="service" />
    </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="hand_pick">
        <img
          v-if="selected == 'hand_pick'"
          src="../assets/tabbar_pic/hand_pick1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/hand_pick.png"
          slot="icon"
          alt=""
        />
        精选</mt-tab-item
      >
      <mt-tab-item id="my_courses">
        <img
          v-if="selected == 'my_courses'"
          src="../assets/tabbar_pic/my_courses1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/my_courses.png"
          slot="icon"
          alt=""
        />
        我的课程</mt-tab-item
      >
       <mt-tab-item id="cdong">
        <img
          v-if="selected == 'cdong'"
          src="../assets/tabbar_pic/cdong3.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/cdong2.png"
          slot="icon"
          alt=""
        />
        虫洞</mt-tab-item
      >
      <mt-tab-item id="personal_center">
        <img
          v-if="selected == 'personal_center'"
          src="../assets/tabbar_pic/personal_center1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/personal_center.png"
          slot="icon"
          alt=""
        />
        个人中心</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "personal_center",
    
    };
  },
  watch: {
    selected(newval) {
      if (newval == "hand_pick") {
        this.$router.push("/"); //  路径 / 映射到Index.vue
      } else if (newval == "me") {
        this.$router.push("/me"); // 路径 /me 映射到Me.vue
      }else if(newval =="cdong"){ 
        this.$router.push("/cdong")// 路径 /cdong 映射到Cdong.vue
      }
    },
  },
  methods:{
    Message(){
      this.axios.get('/kc/address').then(res=>{
        console.log(res);
      })
    }
  },
  mounted() {
    // 请求数据
    this.Message();
  },
};
</script>

<style>
/* .van-nav-bar__content{
  height: 0px;
} */

.Personal > .MyPersonal{
  padding: 30px 0;

}

.Personal > .wode p{
  color: #323233;
}
.Personal > .wode {
  margin-left: 10px;
  margin-right: 10px;
  
}
.Personal > .xingxi {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.Personal > .MyPersonal img {
  width: 100px;
}
.Personal > .MyPersonal p {
  width: 250px;
  font-size: 14px;
  text-align: left;
  
}
.Personal > .MyPersonal span {
  font-size: 30px;
}
/* .Personal {
  margin-top: 40px;
} */

.Personal .wode .van-image {
  width: 50%;
}
</style>